<template>
  <div class="table-tasteorgan">
    <vab-query-form>
      <vab-query-form-left-panel>
        <el-button icon="el-icon-document-add" type="primary" @click="handleAdd(0,'')" >
          传染病登记
        </el-button>
        <el-button type="warning" @click="stamp(0)" >
          打印
         </el-button>

      </vab-query-form-left-panel>
      <vab-query-form-right-panel>

        <el-date-picker
          style="width: 250px"
          size="mini"
          align="right"
          @change="changetime"
          v-model="value1"
          type="datetimerange"
          :unlink-panels="true"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-form :inline="true" :model="queryForm" class="demo-form-inline"  size="mini">
          <el-form-item prop="buildingName" >
            <el-input v-model="queryForm.elderlyName" placeholder="老人姓名"></el-input>
          </el-form-item>


        </el-form>

        <el-button type="primary" style="margin-left: 20px" @click="search(1,'')"  size="mini">条件查询</el-button>


      </vab-query-form-right-panel>
    </vab-query-form>
    <el-dialog
      title="传染病登记"
      @close='closeDialog'
      :visible.sync="dialogFormVisible"
      width="600px"
      destroy-on-close

    >

      <el-form ref="form"   :rules="rules"  :model="form" class="active">
        <el-form-item label="入住人姓名" prop="checkInMark" >
          <el-select
            width="200px"
            v-model="form.checkInMark"
            filterable
            remote

            reserve-keyword
             style="width: 100%"
            placeholder="请输入入住人姓名/证件号/助记码"
            :remote-method="remoteMethod"
            :loading="loading">
            <el-option

              v-for="item in options"
              :key="item.checkInMark"
              :label="item.elderlyName"
              :value="item.checkInMark">

              <span style="float: left;width: 24%">姓名：{{ item.elderlyName }}</span>
              <span style="width: 33%;color: #8492a6;font-size: 13px" >入住房间：{{ item.checkInBed}}</span>
              <span style="width: 37%;float: right; color: #8492a6; font-size: 13px">证件号：{{ item.cardNo }}</span>
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="负责人" prop="principal">
          <el-input v-model="form.principal"></el-input>

        </el-form-item>
        <el-form-item label="登记日期" prop="registrationTime">

          <el-date-picker
            v-model=" form.registrationTime"
            type="datetime"
            style="width: 100%"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="登记日期">
          </el-date-picker>

        </el-form-item>
        <el-form-item label="措施" prop="measure" >
          <el-input v-model="form.measure" type="textarea" ></el-input>

        </el-form-item>
        <el-form-item label="疑似诊断" prop="suspectedDiagnosis" >
          <el-input v-model="form.suspectedDiagnosis" type="textarea" ></el-input>

        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false" >取 消</el-button>
        <el-button type="primary" @click="savedisease">保 存</el-button>

      </div>
    </el-dialog>

    <el-table
      ref="multipleTable"
      :data="tableData"
      v-loading="listLoading"

      tooltip-effect="dark"
      style="width: 100%"

    >
      <el-table-column
        prop="checkInMark"
        label="入住编码"
        width="180">
      </el-table-column>
      <el-table-column
        prop="elderlyCode"
        label="老人编码"
        width="180">
      </el-table-column>

      <el-table-column
        prop="elderlyName"
        label="老人姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="registrationTime"
        label="登记日期"
        width="180">
      </el-table-column>

      <el-table-column
        prop="principal"
        label="负责人"
        width="180">
      </el-table-column>
      <el-table-column
        prop="suspectedDiagnosis"
        label="疑似诊断"
        width="180">
      </el-table-column>

      <el-table-column
        prop="measure"
        label="措施"
        width="180">
      </el-table-column>
      <el-table-column
        prop="genderName"
        label="性别"
        width="180">
      </el-table-column>
      <el-table-column
        label="入住房间"
        width="280">
        <template slot-scope="scope">
          <div>
              {{scope.row.checkInBed.buildingNumber}}楼{{scope.row.checkInBed.unit}}单元{{scope.row.checkInBed.floor}}层{{scope.row.checkInBed.roomNumber}}房{{scope.row.checkInBed.bedNumber}}床
          </div>

        </template>
      </el-table-column>
    </el-table>

    <div ref="print" class="mytables">
      <h3 style="text-align: center;">疑似传染病登记表</h3>
      <table style="width: 100%" class="mytable" cellpadding="0" cellspacing="1">
        <thead>
         <tr>
             
              <td rowspan="2" class="ttitle">日期</td>
              <td colspan="4" style="width: 50%">老人信息</td>
              <td rowspan="2" class="ttitle">疑似诊断</td>
              <td rowspan="2" class="ttitle">措施</td>
           <td rowspan="2" class="ttitle">负责人</td>
            </tr>
         <tr>
              <td>姓名</td>
              <td>性别</td>
           <td>出生年月</td>
              <td>房间</td>
            </tr>
        </thead>
         <tbody>
        <tr v-for="item in list">
            <td style="font-size: 14px">{{item.registrationTime}}</td>
            <td style="width: 10%;font-size: 14px">{{item.elderlyName}}</td>
            <td style="width: 5%;font-size: 14px">{{item.genderName}}</td>
            <td style="font-size: 14px">{{item.birth}}</td>
            <td style="font-size: 14px">{{item.checkInBed.buildingNumber}}楼{{item.checkInBed.unit}}单元{{item.checkInBed.floor}}层{{item.checkInBed.roomNumber}}房{{item.checkInBed.bedNumber}}床</td>
            <td style="font-size: 14px">{{item.suspectedDiagnosis}}</td>
         <td style="font-size: 14px">{{item.measure}}</td>
            <td style="font-size: 14px">{{item.principal}}</td>
          </tr>
      </tbody>




      </table>
    </div>
    <el-pagination
      :background="background"
      :current-page="queryForm.currPageNo"
      :total="total"
      :page-size="queryForm.limit"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
  </div>
</template>

<script>
    import {savedisease,search,searchelderlycondition,infectiousdisease} from "../../api/disease";
    import Print from '@/utils/print'
    import { parseTime} from "@/utils/index";
    import Vue from 'vue'
    Vue.use(Print)
    export default {
        filters:{
            parseTime:parseTime
        },
        name: "Disease",
        data(){
            return{
                options: [],
                list:[],
                loading: false,
                listLoading:true,
                tableData:[],
                total:0,
                rules: {
                    checkInMark: [
                        {required: true, message: '请输入入住人姓名', trigger: 'blur'},

                    ],
                    measure: [
                        {required: true, message: '措施', trigger: 'blur'},

                    ],
                    principal: [
                        {required: true, message: '负责人', trigger: 'blur'},

                    ],
                    registrationTime: [
                        {required: true, message: '登记日期', trigger: 'change'},

                    ],
                    suspectedDiagnosis: [
                        {required: true, message: '疑似诊断', trigger: 'blur'},

                    ],
                },

                dialogFormVisible:false,
                background:true,
                form:{
                    checkInMark:"",//入住编号
                    institutionNumber:"",//机构编码
                    measure:"",//措施
                    principal:"",//负责人
                    registrationTime:"",//登记日期
                    suspectedDiagnosis:""//疑似诊断
                },
                value1:[ new Date(),new Date()+1 * 24 * 3600 * 1000],
                queryForm:{
                    limit:8,
                    currPageNo:1,
                    elderlyName:"",
                    checkInOrganNumber:"",
                    registrationTimeStart:'',
                    registrationTimeEnd:'',

                },
                printForm:{

                    timeStart:"",

                    timeEnd:"",
                    institutionNumber:"",

                }
            }
        },

        mounted() {
            this.queryForm.checkInOrganNumber=localStorage.getItem('institutionNumber')
            this.printForm.institutionNumber=localStorage.getItem('institutionNumber')

            this.search()
        },
        methods:{

            remoteMethod(query) {
                console.log(query)
                if (query !== '') {
                    this.loading = true;
                    setTimeout(() => {
                        this.loading = false;
                        let elderlycondition=query
                        searchelderlycondition({elderlycondition}).then(res =>{
                            console.log(res.data[0])
                            // for(let i=0;i<res.data.length;i++){
                            //     if(res.data[i]!=null){
                            //        console.log(res.data)
                            //         this.options.push(res.data[i])
                            //     } else{
                            //
                            //     }
                            // }
                             this.options=res.data





                        })
                    }, 200);
                } else {
                    this.options = [];
                }
            },
            handleAdd(){
                this.form={
                    checkInMark:"",//入住编号
                        institutionNumber:"",//机构编码
                        measure:"",//措施
                        principal:"",//负责人
                        registrationTime:"",//登记日期
                        suspectedDiagnosis:""//疑似诊断
                },
                  this.dialogFormVisible=true
            },
            closeDialog(){

                this.$refs['form'].resetFields();


            },
            savedisease(){
                this.form.institutionNumber=localStorage.getItem('institutionNumber')
                console.log(this.form)
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        savedisease(this.form).then(res =>{
                            console.log(res)
                            this.$baseMessage("登记成功");
                             this.queryForm.currPageNo=1
                              this.search()
                              this.dialogFormVisible=false

                        })
                    } else {

                        return false;
                    }
                });
            },
            search(id){
                if(id){
                     this.queryForm.currPageNo=1
                }else {
                    this.queryForm.elderlyName=""
                    this.queryForm.registrationTimeStart=new Date()
                    this.queryForm.registrationTimeEnd=new Date()


                    this.value1=[ new Date(), new Date()]
                }
                this.listLoading=true

                search(this.queryForm).then(res =>{

                   this.tableData=res.data.data
                    this.total=res.data.total


                })

                this.printForm.timeStart=this.queryForm.registrationTimeStart
                this.printForm.timeEnd=this.queryForm.registrationTimeEnd

                infectiousdisease(this.printForm).then(res =>{

                    this.list=res.data


                })

                setTimeout(() => {
                    this.listLoading = false;
                }, 500);
            },
            stamp(size){
                if(this.list){
                    this.$print(this.$refs.print, { size })
                }else {
                    this.$baseMessage("当前时间无数据可打印",'warning');
                }

            },
            changetime(value){
                console.log(value)
                if(this.value1){
                    this.queryForm.registrationTimeStart=value[0]
                    this.queryForm.registrationTimeEnd=value[1]
                }else {
                    this.queryForm.registrationTimeStart=new Date()
                    this.queryForm.registrationTimeEnd=new Date()
                }

            },
            handleSizeChange(val) {
                this.queryForm.limit = val;
                this.search();
            },
            handleCurrentChange(val) {

                this.queryForm.currPageNo = val;
                this.search();
            },
        },
    }
</script>

<style scoped>
 body>>>.el-select-dropdown{
   min-width: 500px !important;
  }
 .mytables{
   display: none ;
   padding-top: 10px;
 }
 .mytable
 {
   border-collapse: collapse;
   margin: 0 auto;
   text-align: center;
 }
 .mytable td, table th
 {
   border: 1px solid rgba(59,65,81,.3);
   height: 45px;
 }
 .mytable .ttitle
 {
   background-color: #F5FAFA;
   width: 10%;
 }
 .mytable tr:nth-child(odd)
 {
   background: #fff;
 }
 .mytable .datalist{
   width: 30%;

 }
</style>
